<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定微信用户</title>
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="js/common.js"></script>
    <style>
        .myDiv{
            width: 400px;
            height: 300px;
            float: right;
            border: 1px solid #5c5c5c;
            background: white;
            margin-right: 100px;
            margin-top: 100px;
        }
        .inputDiv{
            height: 80px;
            line-height: 80px;
            margin-left: 40px;
        }
        .inputDiv .input{
            height: 30px;
            width: 200px;
        }
        .btnInput{
            height: 30px;
            width: 100px;
        }
    </style>
</head>
<body style="background-image: url('images/binderimage.jpeg')">
    <div class="myDiv" id="binderDiv">
        <form class="registForm">
            <div>
                <div class="inputDiv">
                    <input class="input" v-model="formParams.mobile" name="mobile"  type="text" value="" placeholder="请输入要绑定的手机号">
                </div>
                <div class="inputDiv">
                    <input class="input left" v-model="formParams.smsCode" type="text" value=""  name="verify" placeholder="输入验证码" />
                    <div id="send" style="display: inline;">
                       <input class="btnInput" type="button" @click="getSmsCode($event)" value="获取验证码"/>
                    </div>
                </div>
            </div>
            <div class="login-button" style="text-align: center">
                <input type="button" class="btnInput" @click="bindWechat"  value="绑定" class="fM"  />
            </div>
        </form>
    </div>
<script type="text/javascript">
    new Vue({
        el: "#binderDiv",
        data: {
            formParams: {
                mobile: "",
                smsCode: "",
                accessToken: "",
                openid: ""
            }
        },
        methods: {
            //绑定完之后提交绑定的数据到后端接口
            bindWechat(){
                //1.参数判空
                if(!this.formParams.mobile||
                    !this.formParams.smsCode||
                    !this.formParams.accessToken||
                    !this.formParams.openid){
                    alert("请填写完整信息后再申请绑定！");
                    return;
                }
                //2.向后端接口发起绑定请求
                this.$http.post("/user/bind/wechat",this.formParams)
                    .then(result => {
                        result=result.data;
                        if (result.success){
                            //绑定成功，说明也登录成功了
                            //将返回来的数据存入localStorage中
                            let {token,loginInfo} = result.result;
                            //loginInfo用来页面展示登录用户名用
                            localStorage.setItem("loginInfo", JSON.stringify(loginInfo));
                            //token用来后端登录拦截时从redis中取数据判断用户是否登录用
                            localStorage.setItem("token", token);
                            location.href = "/index.html";
                            alert("绑定成功，欢迎使用！");
                        }else {
                            alert("绑定失败"+result.message);
                        }

                    }).catch(result=>{
                        alert("绑定失败，系统错误！")
                })
            },
            //给手机发送短信获取验证码
            getSmsCode(event){
                console.log(event);
                //1.判断手机号不为空
                if(!this.formParams.mobile){
                    alert("手机号不能为空");
                    return;
                }
                //2.获取按钮，禁用按钮
                var sendBtn = $(event.target);
                sendBtn.attr("disabled",true);
                //3.发送ajax请求到后端处理手机短信验证码
                this.$http.post("/verifyCode/sms/bindWechat",this.formParams)
                    .then(res=>{
                        var ajaxResult = res.data;
                        if(ajaxResult.success){
                            alert("手机验证码已经发送到您的手机，请在5分钟内使用");
                            //3.1.发送成功：倒计时，倒计时结束后才能再次请求发送
                            var time = 60;

                            var interval = window.setInterval( function () {
                                //每隔一秒钟倒计时减一
                                time = time - 1 ;

                                //把倒计时时间搞到按钮上
                                sendBtn.val(time+"秒后重发");

                                //3.2.倒计时完成恢复按钮
                                if(time <= 0){
                                    sendBtn.val("重新发送");
                                    sendBtn.attr("disabled",false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            },1000);
                        }else{
                            //3.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled",false);
                            alert("发送失败:"+ajaxResult.message);
                        }
                    })
            },
        },
        mounted(){
            //页面加载完就来解析url中的accessToken和openid
            //提交绑定信息的时候需要将这两个参数传到后端接口去微信平台获取微信用户信息
            var urlObj = str2Obj(location.href);
            this.formParams.accessToken=urlObj.accessToken;
            this.formParams.openid=urlObj.openid;
        }
    })
</script>
</body>
</html>